<template>
  <div class="blog-list theme-default-content">
    <div class="blog-item" v-for="blog in blogList" :key="blog.key">
      <el-card>
        <div slot="header">
          <RouterLink :to="blog.path">
            {{ blog.frontmatter.title || blog.title }}
          </RouterLink>
        </div>
        <div class="blog-wrap">
          <div v-if="basicInfo(blog)">
            <div class="blog-content" v-html="basicInfo(blog)"></div>
          </div>
          <div v-else>
            <div class="blog-content">
              <div v-for="item in blog.headers" :key="item.title">
                <div :class="`ul${item.level}`">
                  <RouterLink :to="`${blog.path}#${item.title}`">
                    {{ item.title }}
                  </RouterLink>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElCard } from 'element-ui'
const path = require('path')
export default {
  name: 'NcPostList',

  props: {
    blogList: {
      type: Array,
    },
  },

  computed: {},

  methods: {
    basicInfo(blog) {
      if (blog.excerpt) {
        return blog.excerpt
          .replace(/<h2.*?<\/h2>/m, '')
          .replace(/<p.*?姓名.*?<\/p>/m, '')
          .replace(
            /(?<=src=")(.*?)(?=")/g,
            '$1?x-oss-process=image/resize,w_720/crop,h_480/resize,w_720,h_360,m_fill,limit_0'
          )
          .match(/.*目标.*?$/ms)[0]
      }
    },
  },

  mounted() {
    console.log({ blogList: this.blogList })
  },
}
</script>

<style scoped lang="stylus">
.theme-default-content
  :first-child
    margin-top 0 !important
.blog-list
  .blog-item
    margin-bottom 20px
    .el-card
      box-sizing border-box
      max-height 640px
      padding-bottom 10px !important

      .blog-wrap
        display flex
        .blog-content
          flex 1
        .blog-cover
          width 100px
          height 100px
          border-radius 5px
          background-color #666666
          margin-left 10px

.ul2
  padding-left 2rem
  color #000
.ul3
  padding-left 4rem
  color #2d2d2d
.ul4
  padding-left 6rem
  color #666666
</style>
